<template>
    <div class="interactBottom">
        <flexbox :gutter="0">
            <flexbox-item :span="1/5">
                <router-link to="/" tag="div" class="bottom-back bottom-common" >
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.50rem;height:.50rem;margin-top:.07rem;">
                            <use xlink:href="#icon-weibiaoti1"></use>
                        </svg>
                        <span class="bottom-back__tips">首页</span>
                    </div>
                </router-link>
            </flexbox-item>
            <flexbox-item :span="1/5">
                <router-link :to="'/Participant/'+this.$route.params.id" tag="div" class="bottom-share bottom-common">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.50rem;height:.50rem;margin-top:.07rem;">
                            <use xlink:href="#icon-yonghu"></use>
                        </svg>
                        <span class="bottom-back__sharetips">用户</span>
                    </div>
                </router-link>
            </flexbox-item>
            <flexbox-item :span="3/5">
                <div class="bottom-consult bottom-common">我来说一句</div>
            </flexbox-item>
        </flexbox>
        <div v-wechat-title="$route.meta.title"></div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem  } from 'vux'
export default {
    name: 'InteractBottom',
    components: {
        Flexbox,
        FlexboxItem,
    }
    
}
</script>

<style lang="stylus" scoped>
.interactBottom
    position: fixed
    bottom: 0
    left: 0
    right: 0
    background-color: #fff
    box-shadow: 0 0 1px 1px  #e8e8e8
    .bottom-common
        text-align: center
        height: 1rem
    .bottom-back
        border-right: 1px solid #e8e8e8
        color: #c4c4c4
        position: relative
        .bottom-back__tips
            position: absolute 
            bottom: .10rem
            width: 100%
            left: 0
    .bottom-share
        color: #c4c4c4
        position: relative
        .bottom-back__sharetips
            position: absolute 
            bottom: .10rem
            width: 100%
            left: 0
    .bottom-consult
        line-height: 1rem
        color: #fff
        background-color: #f0ad4e
</style>


